<template>
  <div class="content-container">
    <el-card>
      <el-table max-height="600px" :data="tableData" stripe row-key="id"
        style="width: 100%; margin-top: 10px; max-height: 500px; overflow: auto" ref="tableDataRef" default-expand-all>
        <el-table-column prop="title" label="菜单名称" />
        <el-table-column prop="name" label="组件标识" />
        <el-table-column prop="path" label="菜单路径" />
        <el-table-column prop="icon" label="菜单图标">
          <template #default="scope">
            <el-icon size="20">
              <component :is="scope.row.icon"></component>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="菜单类型">
          <template #default="scope">
            <el-tag :type="scope.row.type == 1
                ? 'warning'
                : scope.row.type == 2
                  ? 'success'
                  : 'danger'
              ">
              {{
                scope.row.type === 1
                  ? '业务'
                  : scope.row.type === 2
                    ? '菜单'
                    : '按钮'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限编码" />
        <el-table-column prop="createTime" label="创建时间" width="200px" />
        <el-table-column fixed="right" label="操作">
          <template #header>
            <el-button icon="plus" circle @click="openDialog(null)" type="success"></el-button>
          </template>
          <template #default="scope">
            <el-button @click="openDialog(scope.row)" link type="primary">
              编辑
            </el-button>
            <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" title="确认删除本条数据?"
              @confirm="removeRow(scope.row.id)" width="200px">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="dialogVisible" :title="(formData.id ? '编辑' : '新增') + '模块信息'" width="50%"
        :close-on-click-modal="false">
        <el-form :model="formData" class="demo-form-inline" ref="formDataRef">
          <el-form-item prop="title" label="菜单名称">
            <el-input clearable v-model="formData.title" />
          </el-form-item>
          <el-form-item prop="path" label="菜单路径">
            <el-input clearable v-model="formData.path" />
          </el-form-item>
          <el-form-item prop="name" label="组件标识">
            <el-input clearable v-model="formData.name" />
          </el-form-item>
          <el-form-item prop="code" label="权限编码">
            <el-input clearable v-model="formData.code" />
          </el-form-item>
          <el-form-item prop="code" label="上级菜单">
            <el-tree-select v-model="formData.parentId" :data="excludes" :render-after-expand="false"
              :props="{ label: 'title', value: 'id' }" clearable searchable filterable check-strictly accordion />
          </el-form-item>
          <el-form-item prop="type" label="菜单类型">
            <el-select v-model="formData.type">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="formSubmit">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup lang="ts" name="Menu">
import { onMounted, reactive, ref, toRefs } from 'vue'
import type { Menu, MenuModDTO } from '@/api/acl/menu/type.ts'
import { exclude, menuAdd, menuDel, menuMod, menuTree } from '@/api/acl/menu'

const formDataRef = ref()
const state = reactive<any>({
  tableData: [] as Menu[],
  dialogVisible: false,
  formData: {} as MenuModDTO,
  excludes: [] as Menu[],
  options: [
    { value: 1, label: '业务' },
    { value: 2, label: '菜单' },
    { value: 3, label: '按钮' },
  ],
})
const { tableData, dialogVisible, formData, excludes, options } = toRefs(state)
onMounted(() => {
  buildTable()
  buildExclude()
})
const buildTable = async () => {
  const result = await menuTree()
  tableData.value = result.data
}
const buildExclude = async () => {
  const result = await exclude()
  excludes.value = [{ id: '0', title: '顶级菜单', children: result.data }]
}
const openDialog = (data: any) => {
  if (formDataRef.value) {
    formDataRef.value.resetFields()
  }

  formData.value = data == null ? {} : data
  dialogVisible.value = true
}
const formSubmit = async () => {
  await formDataRef.value?.validate()
  if (formData.value.id) {
    await menuMod(formData.value)
  } else {
    await menuAdd(formData.value)
  }
  dialogVisible.value = false
  await buildTable()
}
const removeRow = async (id: string) => {
  await menuDel(id)
  await buildTable()
}
</script>


<style scoped lang="scss">
.content-container {
  padding: 12px;
}
</style>